<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一元运购-详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> 
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="stylesheet" type="text/css" href="share/colorbox/colorbox.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/TouchSlide.1.1.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="share/colorbox/jquery.colorbox.js."></script>
</head>
<body>
	<div class="header detail_header">
		<div class="nav">
		    <div class="search  return"><a href="search.html"></a></div>
		    <div class="title">商品详情</div>
		    <div class="right">
		        <a href="index.html"><img src="images/homeon.png" alt=""></a>
		        <a href="javascript:"><img onclick="$('#sub-title').toggle();$('#screenIfmNav').toggle();" src="images/menu.png"></a>
		        <ul class="more" id="sub-title">
		            <li><a class="buy-icon" href="javaScript:">云购记录</a></li>
		            <li><a class="help-icon" href="help.html">帮助中心</a></li>
		            <li><a class="share" href="javaScript:">分享</a></li>
		        </ul>
		    </div>
		    <div id="screenIfmNav" class="screenIfm" onclick="$('#sub-title').toggle();$(this).hide();"></div>
		    <script type="text/javascript">
		    	var opacity  = 0;
		    	$(window).scroll(function(){
			        var this_scrollTop = $(this).scrollTop();
			        var header_height = $('.detail_header').height();
			        opacity = this_scrollTop/header_height;
			        if(opacity>1){
			        	opacity=1;
			        }
			        if(this_scrollTop>0){
			        	$('.detail_header').css('background','rgba(255,255,255,'+opacity+')');
			        	$('.detail_header .title').css('opacity',opacity);
			        }else{
			        	$('.detail_header').css('background','rgba(255,255,255,0)');
			        	$('.detail_header .title').css('opacity',0);
			        }
			    });
		    </script>
		</div>
	</div>
	<div class="container detail">
		<div id="focus" class="focus detail_focus">
			<div class="hd"><ul></ul></div>
			<div class="bd">
				<ul>
					<li>
						<a href="javascript:;">
							<img _src="./images/slide2.png"/>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							
							<img _src="./images/slide1.png"/>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<img _src="./images/slide3.png"/>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script>
			TouchSlide({ 
				slideCell:"#focus",
				titCell:".hd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
				mainCell:".bd ul", 
				effect:"left", 
				// autoPlay:true,//自动播放
				autoPage:true, //自动分页
				switchLoad:"_src" //切换加载，真实图片路径为"_src" 
			});
		</script>
		<div class="detail_base">
			<div class="title">
				<p>(第975云) 华为（HUAWEI）P10 Plus 6GB+64GB版 全网通 4G手机<span>简约设计，倾心，应手！徕卡人像摄影，每一拍，都是大片！（颜色随机发）</span></p>
			</div>
			<div class="price">价值：￥4888.00</div>
			<div class="linebox">
				<div class="line">
					<div class="on"></div>
				</div>
				<table>
					<tr>
						<td class="fore">4271</td>
						<td>7130</td>
						<td class="final">2859</td>
					</tr>
					<tr>
						<td>已参与</td>
						<td>总需人数</td>
						<td>剩余</td>
					</tr>
				</table>
			</div>
			<div class="nologin"><a href="javascript:">你还未登录哦，请登陆后再查看吧</a></div>
		</div>
		<div class="detailmore">
			<ul>
				<li><a href="javascript:">图文详情</a></li>
				<li><a href="comment.html">商品晒单(31)</a></li>
			</ul>
		</div>
		<div class="tabbox">
			<div class="top">
				<div class="tab current"><a href="javascript:"><span>参与记录</span></a></div>
				<div class="tab"><a href="javascript:"><span>历史获得者</span></a></div>
				<div class="clear"></div>
			</div>
			<div class="tabmain">
				<ul>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span class="nick">今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span class="nick">今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span class="nick">今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span class="nick">今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span class="nick">今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span class="nick">今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span class="nick">今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span class="nick">今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span>今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span>今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
					<li>
						<div class="deps">
							<img src="images/join.jpg" alt="">
							<p><span>今天必中</span>(北京市)</p>
							<p>2017-04-30 10:06:05.550</p>
							<div class="num"><span>1</span>人次</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="tabmain" style="display:none;">
				<ul>
					<li>
						<div class="time"><span>第996云</span><span>揭晓时间</span><span>今天01:24</span></div>
						
						<div class="deps prev">
							<img src="images/join.jpg" alt="">
							<p>获得者：<span class="get">终于等到你</span>(广东省深圳市)</p>
							<p>本云参与：<i>1500</i>人次</p>
							<p>幸运云购码：<i>10005600</i></p>
						</div>
					</li>
					<li>
						<div class="time"><span>第996云</span><span>揭晓时间</span><span>今天01:24</span></div>
						
						<div class="deps prev">
							<img src="images/join.jpg" alt="">
							<p>获得者：<span class="get">终于等到你</span>(广东省深圳市)</p>
							<p>本云参与：<i>1500</i>人次</p>
							<p>幸运云购码：<i>10005600</i></p>
						</div>
					</li>
					<li>
						<div class="time"><span>第996云</span><span>揭晓时间</span><span>今天01:24</span></div>
						
						<div class="deps prev">
							<img src="images/join.jpg" alt="">
							<p>获得者：<span class="get">终于等到你</span>(广东省深圳市)</p>
							<p>本云参与：<i>1500</i>人次</p>
							<p>幸运云购码：<i>10005600</i></p>
						</div>
					</li>
					<li>
						<div class="time"><span>第996云</span><span>揭晓时间</span><span>今天01:24</span></div>
						
						<div class="deps prev">
							<img src="images/join.jpg" alt="">
							<p>获得者：<span class="get">终于等到你</span>(广东省深圳市)</p>
							<p>本云参与：<i>1500</i>人次</p>
							<p>幸运云购码：<i>10005600</i></p>
						</div>
					</li>
					<li>
						<div class="time"><span>第996云</span><span>揭晓时间</span><span>今天01:24</span></div>
						
						<div class="deps prev">
							<img src="images/join.jpg" alt="">
							<p>获得者：<span class="get">终于等到你</span>(广东省深圳市)</p>
							<p>本云参与：<i>1500</i>人次</p>
							<p>幸运云购码：<i>10005600</i></p>
						</div>
					</li>
					<li>
						<div class="time"><span>第996云</span><span>揭晓时间</span><span>今天01:24</span></div>
						
						<div class="deps prev">
							<img src="images/join.jpg" alt="">
							<p>获得者：<span class="get">终于等到你</span>(广东省深圳市)</p>
							<p>本云参与：<i>1500</i>人次</p>
							<p>幸运云购码：<i>10005600</i></p>
						</div>
					</li>
				</ul>
			</div>
			<script type="text/javascript">
				$(function(){
					$('.tab').each(function(n){
						$(this).click(function(){
							$('.tab').removeClass('current').eq(n).addClass('current');
							$('.tabmain').hide().eq(n).show();
						})
					})
					var tab_height = $(".tabbox .top").offset().top;
				    $(window).scroll(function(){
				        var this_scrollTop = $(this).scrollTop();
				        var top_height =$(".tabbox .top").innerHeight();
				        if(this_scrollTop>=tab_height-top_height+2 ){
				        	// alert('11');
				           $(".tabbox .top").addClass('fix');
				        }else{
				        	$(".tabbox .top").removeClass('fix');
				        }
				    });
				})
			</script>
		</div>
	</div>
	<!-- inline弹框 -->
	<div style='display:none'>
		<div id='inline_content' style='background:#fff;'>
			<div class="fir">
				<div class="cart">
					<div class="list">
						<div class="items">
							<div class="c_item">
								<a class="cell1" href="goods.html">
									<img class="cart-photo-thumb" alt="" src="./images/li.jpg">
								</a>
								<div class="cell2">
									<div class="title">
										<a href="detail.html">
											(第28888云)杭衣汇长袖秋装连衣裙2015秋款女装毛呢连衣裙秋1869
										</a>
									</div>
									<div class="cell3">
										<span class="shp-cart-item-price">
											剩余16648人次,限购<i>5</i>人次
										</span>
									</div>
									
								</div>
								<div>
									<div class="buycount">
										<div class="buycount-ctrl">
											<a href="javascript:void(0);" class="ctrl minus disabled">
												<span class="horizontal">
												</span>
											</a>
											<input value="1" autocomplete="off" type="number" onkeyup='this.value=this.value.replace(/[^0-9]D*$/,"")' ondragenter="return false" onpaste="return !clipboardData.getData('text').match(/D/)">
											<a href="javascript:void(0);" class="ctrl plus">
												<span class="horizontal">
												</span>
												<span class="vertical">
												</span>
											</a>
										</div>
									</div>
									<div class="wastebin"></div>
								</div>
							</div>
						</div>
						<div class="clear"></div>
					</div>	
				</div>
				<div class="detailmore goto" href="#inline_content2">
					<ul>
						<li><a href="javascript:"><i>支付宝支付</i><span>￥1.00</span></a></li>
					</ul>
				</div>
				<div class="cart">
					
					<div class="autonew shp-chk-new colorshp">
						<input type="checkbox" value="1" id="cka" checked="checked">
						<label class="cart-checkbox" for="cka">
						</label>
						<label class="cart-checkbox-text" for="cka">
							如被抢光自动参与最新一云
						</label>
					</div>
					
				</div>
				<div class="paybtn colorbtn">
					<a href="javascript:">
						确认支付
					</a>
				</div>
			</div>
			
			
		</div>
	</div>
	<div style='display:none'>
		<div id='inline_content2' style='background:#fff;'>
			<div class="sec">
				<div class="sec_top inline"href="#inline_content"><i></i>请选择支付方式</div>
				<div class="paytype r_pay">
					<ul>
						<li class="r_disabled">
							
							<div class="checkbox">
								<input type="radio" name="payway" value="1" id="ty1" disabled="disabled">
								
							</div>
							<p><i class="ff"></i>福分支付<span>(您的福分20)</span></p>
							<label for="ty1"></label>
						</li>
						<li class="r_disabled">
							
							<div class="checkbox">
								<input type="radio" name="payway" value="1" id="ty2" disabled="disabled">
								
							</div>
							<p><i class="yue"></i>余额支付<span>(账户余额￥0.00)</span></p>
							<label for="ty2"></label>
						</li>
						<li>
							<div class="checkbox">
								<input type="radio" name="payway" value="1" id="ty3">
								
							</div>
							<img src="images/icon_pay_wangyin.png" alt="">
							<div class="clear"></div>

							<label for="ty3" class='inline' href="#inline_content"><div class="txt">京东支付</div></label>
						</li>
						<li>
					
							<div class="checkbox">
								<input type="radio" name="payway" value="1" id="ty5">
								
							</div>
							<img src="images/icon_pay_weixin.png" alt="">
							<div class="clear"></div>
							<label for="ty5" class='inline' href="#inline_content"><div class="txt">微信支付</div></label>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			var window_width  = $(window).width();
			if(window_width<720){
				$(".inline").colorbox({inline:true, width:"90%",overlayClose:false,fixed:true});
				$(".goto").colorbox({inline:true, width:"90%",overlayClose:false,fixed:true});
			}else{
				$(".inline").colorbox({inline:true, width:"700px",overlayClose:false,fixed:true});
				$(".goto").colorbox({inline:true, width:"700px",overlayClose:false,fixed:true});
			}
			$('.paytype.r_pay li>label').click(function(){
				var txt = $(this).text();
				$('.goto li a i').text(txt);
			})
		});
	</script>
	<!-- 底部 -->
	<div class="footer">
		<ul class="wd_nav">
			<dl>
				<dd><a class='inline' href="#inline_content">立即一元运购</a></dd>
				<dd><a href="javascript:">加入购物车</a></dd>
				<dd><a href="cart.html"></a></dd>
			</dl>
		</ul>
	</div>
</body>
</html>